<template>
	<view class="home_laout pageBg">
		<tabarComp></tabarComp>
		<view class="view_swp">
			<swiper class="swiper"
			 indicator-dots 
			 indicator-color="#fffefd" 
			 autoplay
			 circular>
				<template v-for="item in Banner" :key="item._id">
				<swiper-item @click="navigator(item)">
				    <image :src="item.picurl" mode="scaleToFill"></image>
				</swiper-item>
				</template>
			</swiper>
		</view>
		
		<view class="newgg">
			<view class="left">
				<uni-icons type="sound" size="30" color=""></uni-icons>
				<text>公告:</text>
			</view>
			<view class="cent">
				<swiper vertical  autoplay circular>
				    <template v-for="item in Newlist" :key="item._id">
						<swiper-item>
							<text>{{item.title}}</text>
						</swiper-item>
				    </template>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="24"></uni-icons>
			</view>
		</view>
		
		<view class="boxitem">
			<TitleComp>
				<template #title>
					<text>每日推荐</text>
				</template>
				<template #more>
		
					<uni-icons  type="calendar" size="24"></uni-icons>
					<uni-dateformat class="colos" :date="Date.now()" format="MM/dd"></uni-dateformat>
					<uni-icons  type="right" size="20"></uni-icons>
				</template>
			</TitleComp>
			
			<view>
				<scroll-view scroll-x>
					<template v-for="item in randomlist" :key="item._id">
					    <view class="boximg" @click="onNavigator(item._id)">
						   <image :src="item.smallPicurl" mode="aspectFill"></image>
						</view>
					</template>
				</scroll-view>
			</view>
		</view>
		
		<view class="boxitem">
			<TitleComp>
				<template #title>
					<text>专题精选</text>
				</template>
				<template #more>
					<text>More+</text>
					<!-- <uni-icons type="right" size="20"></uni-icons> -->
					<!-- <uni-dateformat :date="Date.now()" format="MM/dd"></uni-dateformat> -->
				</template>
			</TitleComp>
			<view class="itemComp">
		          <ItemComp v-for="item in Classifylist" :key="item._id" :item='item' :isshow='true' ></ItemComp>
			      <ItemComp :isshow='false'></ItemComp>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import {RequestBnner,RequestRandom,RequestNew,RequestClassify}from '@/apis/apis.js'
import {onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'
let Banner = ref([])
let randomlist = ref([])
let Newlist=ref([])
let Classifylist=ref([])
	function onNavigator(id){
		uni.navigateTo({
			url:'/pages/ImgView/ImgView?id='+id
		})
		uni.setStorageSync('classifyimgstorage',randomlist.value)
	}
	// 获取首页轮播图
async function  getBnner(){
   let res = await RequestBnner()
   // console.log(res.data);
     Banner.value=res.data.data
	} 
// 每日推荐
async function getDataTJ(){
	let res = await RequestRandom()
	randomlist.value=res.data.data
	} 
	// 公告
async function getNew(){
	let res = await RequestNew({select: false})
	// console.log(res);
	Newlist.value=res.data.data
}
// 分类数据
async function getClassify(){
	let res = await RequestClassify({select: true})
	// console.log("@@",res);
	Classifylist.value=res.data.data
}
// 分享朋友
onShareAppMessage(()=>{
	return {
	      title: '小冰壁纸库',
	      path: 'pages/index/index',
		  // imageUrl:'../../static/3.png'
	    }
})
// 分享朋友圈
onShareTimeline(()=>{
	return {
	      title: '小冰壁纸库',
	      path: 'pages/index/index',
		  // imageUrl:'../../static/3.png'
	    }
})

function  navigator(item){
	      console.log(item);
		  let {_id:id,url,target}=item
		  if(target=='self'){
			uni.navigateTo({
		  	  url:'/pages/classifyItem/classifyItem?'+url
		    })  
		  }else{
			  uni.reLaunch({
			    url:'/pages/classify/classify'
			  }) 
		  }
		  
}
	getBnner()
	getDataTJ()
	getNew()
	getClassify()
</script>

<style lang="scss" scoped>
.home_laout{
	width: 750rpx;
	.view_swp{
		width: 750rpx;
		padding:30rpx 0;
		.swiper{
			width: 750rpx;
			height: 340rpx;
			swiper-item{
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 10px;
				}
			}
		}
	}
	.newgg{
		width: 690rpx;
		height: 80rpx;
		margin: 0 auto;
		display: flex;
		background-color: #ececec;
		opacity: 0.8;
		border-radius: 10px;
		.left{
			flex: 0.7;
			display: flex;
			justify-content: safe;
            align-items: center;
			text{
				font-weight:700;
				color: $them-color;
			}
		}
		.cent{
			flex: 2;
			// background-color: wheat;
			swiper{
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				swiper-item{
					// padding-left:10px ;
					display: flex;
					justify-content: safe;
					align-items: center;
					text{
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
			
		}
		.right{
			flex: 0.5;
			display: flex;
			justify-content: end;
			align-items: center;
		}
	}
	.boxitem{
		width: 720rpx;
		// height: 430rpx;
		// background-color: lawngreen;
		margin:40rpx 0rpx 0rpx 30rpx;  
		.colos{
			color:$them-color;
		}
		:deep(){
			.uni-icons{
				color:$them-color !important;
			}
		}
		scroll-view{
			white-space: nowrap;
			.boximg{
				width: 200rpx;
				height: 430rpx;
				display: inline-block;
				margin-right:15rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 10px;
			    }
		    }
		    .boximg:last-child{
				margin-right: 30rpx;
			}
		}
		.itemComp{
			padding: 0rpx 0rpx 50rpx 0rpx ;
			margin-top: 20rpx;
			display: grid;
			grid-template-columns: repeat(3,1fr);
			gap: 15px;
			margin-right: 30rpx;
		}
		
	}
}
</style>
